<template>
  <div>
    <div :class='nodeclass'>
      <svg-icon style="margin-left: 5px; font-size: 20px" :icon-class="icon" />
      <span :class="nodelabelclass">{{lable}} </span>
       <span v-if="isruning" class='runimg' v-loading="runing"></span>
        <span v-if="issuccess">
          <svg-icon class="completecircle" icon-class="complete"/>
        </span>
        <span v-if="isfail">
         <svg-icon class="circle" icon-class="error"/>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Count",
  inject: ["getGraph", "getNode"],
  data() {
    return {
      status:'success',
      lable:'',
      runing:false,
      nodeclass:'',
      nodelabelclass:'runodelabel',
      isruning:false,
      issuccess:false,
      isfail:false,
      icon:""
    };
  },
  mounted() {
    const node = this.getNode();
    this.lable = node.attrs.label.text
    let status = node.store.data.data.nodestatus
    this.icon =  node.data.icon
    this.nodestuts(status)
    if(node.data.nodeopen ==='false'){
      this.nodeclass = 'offnode'
    }else {
      this.nodeclass = 'runode'
    }
    node.on("change:data", ({ current }) => {
      if(current.nodestatus){
        status = current.nodestatus
        this.nodestuts(status)
      }
      if(current.nodename){
        this.lable = current.nodename
      }
      if(!current.nodeopen){
        this.nodeclass = 'offnode'
      }else {
        this.nodeclass = 'runode'
      }

    });
  },
  methods: {
    nodestuts(status){
      if(status==='start'){
        this.runing = false
        this.nodeclass = 'runode'
        this.nodelabelclass = 'runodelabel'
        this.isruning = false
        this.issuccess =false
        this.isfail=false
      }
      if(status==='begin'){
        this.runing = true
        this.nodeclass = 'runode'
        this.nodelabelclass = 'runodelabel'
        this.isruning = true
        this.issuccess =false
        this.isfail=false
      }
      if(status==='end'){
        this.runing = false
        this.nodeclass = 'successnode'
        this.nodelabelclass = 'successlabel'
        this.isruning = false
        this.issuccess =true
        this.isfail=false
      }
      if(status==='error'||status==='interrupted'||status==='interruptederror'){
        this.runing = false
        this.nodeclass = 'failnode'
        this.nodelabelclass = 'faillabel'
        this.isruning = false
        this.issuccess =false
        this.isfail=true
      }

    }
  },
};
</script>
<style scoped>
.offnode{
    display: flex;
    align-items: center;
    width: 130px;
    height: 30px;
    background-color: rgba(140, 134, 134, 0.5);
    border: 1px solid #3A3D51;
    border-left: 4px solid #5F95FF;
    border-radius: 4px;

}

.runode {
    display: flex;
    align-items: center;
    width: 130px;
    height: 30px;
    background-color: #3A3D51;
    border: 1px solid #3A3D51;
    border-left: 4px solid #5F95FF;
    border-radius: 4px;
    /*box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);*/
}
.runodelabel {
    display: inline-block;
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    /*margin-left: 8px;*/
    color: #fff;
    font-size: 12px;
}
.x6-node-selected .runode {
    border-color: #1890ff;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #0c6bd2;
}
.runimg{
    margin-top: 15px;
}
.successnode {
    display: flex;
    align-items: center;
    width: 130px;
    height: 30px;
    background-color: #3A3D51;
    border: 1px solid #3A3D51;
    border-left: 4px solid #52c41a;
    border-radius: 4px;
}
.successlabel {
    display: inline-block;
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    /*margin-left: 8px;*/
    color: #fff;
    font-size: 12px;
}
.x6-node-selected .successnode {
    border-color: #52c41a;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #ccecc0;
}

.failnode{
    display: flex;
    align-items: center;
    width: 130px;
    height: 30px;
    background-color: #3A3D51;
    border: 1px solid #3A3D51;
    border-left: 4px solid #ff4d4f;
    border-radius: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
}

.faillabel {
    display: inline-block;
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    /*margin-left: 8px;*/
    color: #fff;
    font-size: 12px;
}
.x6-node-selected .failnode {
    border-color: #ff4d4f;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #fedcdc;
}
/*.node img {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    flex-shrink: 0;*/
/*    margin-left: 8px;*/
/*}*/


.node .status {
    flex-shrink: 0;
}
.success {
    width: 10px;
    height: 30px;
}
.node.success {
    border-left: 4px solid #52c41a;
}
.node.failed {
    border-left: 4px solid #ff4d4f;
}
.node.running .status img {
    animation: spin 1s linear infinite;
}

.x6-node-selected .node.failed {
    border-color: #ff4d4f;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #fedcdc;
}
.x6-node-selected .offnode {
    border-color: #1890ff;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #0c6bd2;
}

.x6-edge:hover path:nth-child(2){
    stroke: #1890ff;
    stroke-width: 1px;
}

.x6-edge-selected path:nth-child(2){
    stroke: #1890ff;
    stroke-width: 1.5px !important;
}

@keyframes running-line {
    to {
        stroke-dashoffset: -1000;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
